<template>
  <div class="top-tab tags-view-wrapper" >
<!--    <scroll-pane ref='scrollPane' class="tags-view-wrapper">-->
      <router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'tab-select tab-active mgl-5':'tab-select'"
                   v-for="tag in Array.from(tags)"
                   :to="tag" :key="tag.path" :title="tag.title">
        {{tag.title.length>4?(tag.title.substring(0,4)+"..."):tag.title}}
        <span class='el-icon-close' v-if="tag.path != '/index'" @click.prevent.stop='closeTab(tag)'></span>
      </router-link>
<!--    </scroll-pane>-->
  </div>
</template>

<script>
// import path from 'path'
// import { generateTitle } from '@/assets/utils/i18n'
export default {
  components: {
    // 'scroll-pane': () => import('./scrollPane')
  },
  data() {
    return {
      tags:[{
        path:"/",
        title:"员工录入",
      }],
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      affixTags: []
    }
  },
  computed: {
    // scrollWrapper() {
    //   return this.$refs.scrollbar.$refs.wrap
    // }
  },
  watch: {
    $route() {
      this.addTags();
      this.moveToCurrentTag()
    },
    // visible(value) {
    //   if (value) {
    //     document.body.addEventListener('click', this.closeMenu)
    //   } else {
    //     document.body.removeEventListener('click', this.closeMenu)
    //   }
    // }
  },
  mounted() {
    // this.initTags();
    // this.addTags();
  },
  methods: {
    closeTab(tag){

    },
    // generateTitle, // generateTitle by vue-i18n
    // 是否为激活标签
    isActive(route) {
      // return route.path === this.$route.path
    },
    filterAffixTags(routes, basePath = '/') {
      // let tags = [];
      // routes.forEach(route => {
      //   if (route.meta && route.meta.affix) {
      //     const tagPath = path.resolve(basePath, route.path);
      //     tags.push({
      //       fullPath: tagPath,
      //       path: tagPath,
      //       name: route.name,
      //       meta: { ...route.meta }
      //     })
      //   }
      //   if (route.children) {
      //     const tempTags = this.filterAffixTags(route.children, path.resolve(basePath, route.path));
      //     if (tempTags.length >= 1) {
      //       tags = [...tags, ...tempTags]
      //     }
      //   }
      // });
      // return tags
    },
    initTags() {
      // const affixTags = this.affixTags = this.filterAffixTags(this.$store.state.permission.routes);
      // for (const tag of affixTags) {
      //   // Must have tag name
      //   if (tag.name) {
      //     this.$store.dispatch('addVisitedView', tag)
      //   }
      // }
    },
    addTags() {
      const { name } = this.$route;
      if (!name) {
        this.$store.dispatch('addView', this.$route)
      }
      return false
    },
    openMenu(tag, e) {
      // const menuMinWidth = 95;
      // const winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      // const maxLeft = winWidth - menuMinWidth;
      // const left = e.clientX;
      //
      // this.left = left > maxLeft ? maxLeft : left;
      // this.top = e.clientY + 10;
      // this.visible = true;
      // this.selectedTag = tag
    },
    closeMenu() {
      // this.visible = false
    },
    // 响应鼠标滚动
    handleScroll(e) {
      // const eventDelta = e.wheelDelta || -e.deltaY * 40;
      // const $scrollWrapper = this.scrollWrapper;
      // $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
    },
    moveToCurrentTag() {
      // const tags = this.$refs.tag;
      // this.$nextTick(() => {
      //   for (const tag of tags) {
      //     if (tag.to.path === this.$route.path) {
      //       this.moveToTarget(tag);
      //       // when query is different then update
      //       if (tag.to.fullPath !== this.$route.fullPath) {
      //         this.$store.dispatch('updateVisitedView', this.$route)
      //       }
      //       break
      //     }
      //   }
      // })
    },
    moveToTarget(currentTag) {
      // const tagAndTagSpacing = 5; // 标签间间距
      // const $container = this.$refs.scrollbar.$el;
      // const $containerWidth = $container.offsetWidth;
      // const $scrollWrapper = this.scrollWrapper;
      // const tagList = this.$refs.tag;
      //
      // let firstTag = null;
      // let lastTag = null;
      //
      // // find first tag and last tag
      // if (tagList.length > 0) {
      //   firstTag = tagList[0];
      //   lastTag = tagList[tagList.length - 1]
      // }
      //
      // if (firstTag === currentTag) {
      //   $scrollWrapper.scrollLeft = 0
      // } else if (lastTag === currentTag) {
      //   $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
      // } else {
      //   // find preTag and nextTag
      //   const currentIndex = tagList.findIndex(item => item === currentTag);
      //   const prevTag = tagList[currentIndex - 1];
      //   const nextTag = tagList[currentIndex + 1];
      //
      //   // the tag's offsetLeft after of nextTag
      //   const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;
      //
      //   // the tag's offsetLeft before of prevTag
      //   const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing;
      //
      //   if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
      //     $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
      //   } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
      //     $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
      //   }
      // }
    },
    // 刷新对应标签页
    refreshSelectedTag(view) {
      // this.$store.dispatch('delCachedView', view).then(() => {
      //   const { fullPath } = view;
      //   this.$nextTick(() => {
      //     this.$router.replace({
      //       path: '/redirect' + fullPath
      //     })
      //   })
      // })
    },
    // 关闭对应标签
    closeSelectedTag(view) {
      // this.$store.dispatch('delView', view).then(({ visitedViews }) => {
      //   if (this.isActive(view)) {
      //     this.toLastView(visitedViews)
      //   }
      // })
    },
    // 关闭除当前标签外的其他标签(不包括常驻标签)
    closeOthersTags() {
      // this.$router.push(this.selectedTag);
      // this.$store.dispatch('delOthersViews', this.selectedTag).then(() => {
      //   this.moveToCurrentTag()
      // })
    },
    // 关闭所有标签(不包括常驻标签)
    closeAllTags(view) {
      // this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
      //   if (this.affixTags.some(tag => tag.path === view.path)) {
      //     return
      //   }
      //   this.toLastView(visitedViews)
      // })
    },
    // 跳转到前一次访问的界面
    toLastView(visitedViews) {
      // const latestView = visitedViews.slice(-1)[0];
      // if (latestView) {
      //   this.$router.push(latestView)
      // } else {
      //   // You can set another route
      //   this.$router.push('/')
      // }
    }
  }
}
</script>

